<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="wrapBg">

    <div id="headTitle">
      <img src="./img/bird0.png" alt="" id="headBird">
    </div>

    <button id="statrtBtn"></button>

    <div id="grassLand1"></div>
    <div id="grassLand2"></div>

  </div>

  <script src="./bird.js"></script>
  <script src="./utils.js"></script>
  <script>
    var jsHeadTitle = document.getElementById('headTitle')
    var jsHeadBird = document.getElementById('headBird')
    var jsWrapBg = document.getElementById('wrapBg')
    var blockArr = []

    // 标题的摆动
    var Y = 3
    var imgArr = ['./img/bird0.png', './img/bird1.png']
    var index = 0
    var headWaveTimer =  setInterval(headWave, 200)
    function headWave() {
      Y = Y * -1
      jsHeadTitle.style.top = jsHeadTitle.offsetTop + Y + 'px'
      jsHeadBird.src = imgArr[index++]
      if (index > 1) {
        index = 0
      }
    }

    // 草地移动
    var jsGrassLand1 = document.getElementById('grassLand1')
    var jsGrassLand2 = document.getElementById('grassLand2')
    var landTimer = setInterval(landRun, 30)
    function landRun() {
      jsGrassLand1.style.left = jsGrassLand1.offsetLeft - 3 + 'px'
      jsGrassLand2.style.left = jsGrassLand2.offsetLeft - 3 + 'px'

      if (jsGrassLand1.offsetLeft <= -343) { // 超出屏幕
        jsGrassLand1.style.left = 343 + 'px'
      }
      if (jsGrassLand2.offsetLeft <= -343) { // 超出屏幕
        jsGrassLand2.style.left = 343 + 'px'
      }

      // 管道移动
      var blockDistance = baseObj.randomNum(120, 230)
      if (blockArr.length > 0) {
        for (var i = 0; i < blockArr.length; i++) {
          blockArr[i].moveBlock()
          // 检测碰撞
          var x = baseObj.rectangleCrashExamine(blockArr[i].upDivWrap, bird.div)
          var y = baseObj.rectangleCrashExamine(blockArr[i].downDivWrap, bird.div)
          var z = bird.div.offsetTop >= 390
          if (x || y || z) {
            clearInterval(landTimer)
            jsWrapBg.onclick = null
          }
        }

        // 下一根管道的生成
        if (blockArr[blockArr.length - 1].downDivWrap.offsetLeft < (450 - blockDistance)) {
          var newBlock = new Block()
          newBlock.createBlock()
          blockArr.push(newBlock)
        }

        // 清除左侧多余的管道
        if (blockArr[0].downDivWrap.offsetLeft < -60) {
          jsWrapBg.removeChild(blockArr[0].upDivWrap)
          jsWrapBg.removeChild(blockArr[0].downDivWrap)
          blockArr.shift()
        }

      }



    }
  
    // 点击开始
    var jsStartBtn = document.getElementById('statrtBtn')
    jsStartBtn.onclick = function() {
      // 让标题，按钮本身 消失
      jsHeadTitle.style.display = 'none'
      jsStartBtn.style.display = 'none'
      clearInterval(headWaveTimer)

      // 小鸟出现
      bird.showBird(jsWrapBg)
      bird.flyBird()
      bird.wingWave()
      jsWrapBg.onclick = function() {
        bird.fallSpeed = -8
      }

      // 管道出现
      var b = new Block()
      b.createBlock()
      blockArr.push(b)

    }


  </script>

  <script src="./block.js"></script>
</body>
</html>